<template> 
  <div id="cesiumContainer">
    <!-- 负氧离子县级数据 -->
    <div v-if="isCounty && $store.state.forq==0">
        <div  v-for="(item,index) in markerArr4"  
        :id=" 'popup-fylzCounty'  + '-' + item.Level + '-' + index "
        class="cesium-popup"  :key="index"   v-show="item.count"     style="pointer-events: none;position:absolute;z-index:1;">
        <div id="fuyangCityMarker${i}" class="cesium-popup-content-wrapper" style="position:relative;box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit" >
                <div class="cesium-popup-content" style="    margin: 15px 10px 0px;">
                    <div class="fylzStationName" style="width:90%;margin:0 auto;text-align:center;background:rgba(255,255,255,.5)" 
                        data-name="${markerArr[i].name}"
                        data-stationX="${markerArr[i].x}" 
                        data-stationY="${markerArr[i].y}">
                        
                    </div>
                    <div class="fuyangliziNum" :style='"font-size:20px;pointer-events: auto; background:linear-gradient(0deg,rgba(13,131,214,0) 0%," + item.Color100 + " 100%)"'
                        data-stationX="${markerArr[i].x}" 
                        data-stationY="${markerArr[i].y}">
                        <span style="display:block;font-size:20px;margin:o auto;pointer-events: auto;cursor:pointer;color:yellow;" @click="handleClickCounty(item.name, item.x, item.y)">{{item.name}}</span>
                        {{parseInt(item.count)}}</div>
                    <div class="fuyangCanvas" :style='"background:linear-gradient(0deg," + item.Color100 + " 0%,rgba(13,131,214,0) 100%)"'>
                        <div class="fuyanglizi" >
                            <img id="${eleId}canvas" width="76" height="87" :src="item.canvas" />
                        </div>
                    </div>
                </div>
                <div class="yuanquan" :style='"background:" + item.Color100 '>
                    <div class="xiaoyuanquan"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 负氧离子站点数据 -->
    <div v-if="isStation && $store.state.forq==0">
        <div  v-for="(item,index) in markerArr2"  
        :id=" 'popup-fylzStation'  + '-' + item.Level + '-' + index "
        class="cesium-popup"  :key="index"    v-show="item.negative_K04"    style="pointer-events: none;position:absolute;z-index:1;">
        <div id="fuyangCityMarker${i}" class="cesium-popup-content-wrapper" style="position:relative;box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit" >
                <div class="cesium-popup-content">
                    <div class="fylzStationName" style="width:90%;margin:0 auto;text-align:center;background:rgba(255,255,255,.5)" 
                        data-name="${markerArr[i].name}"
                        data-stationX="${markerArr[i].x}" 
                        data-stationY="${markerArr[i].y}">
                        
                    </div>
                    <div class="fuyangliziNum" :style='"font-size:20px;pointer-events: auto; background:linear-gradient(0deg,rgba(13,131,214,0) 0%," + item.Color100 + " 100%)"'
                        data-stationX="${markerArr[i].x}" 
                        data-stationY="${markerArr[i].y}">
                        <span style="display:block;margin:o auto;pointer-events: auto;cursor:pointer;font-size:20px;color:yellow;" @click="handleClickStation(item.name, item.x, item.y)">{{item.name}}</span>
                        {{parseInt(item.negative_K04)}}</div>
                    <div class="fuyangCanvas" :style='"background:linear-gradient(0deg," + item.Color100 + " 0%,rgba(13,131,214,0) 100%)"'>
                        <div class="fuyanglizi" >
                            <img id="${eleId}canvas" width="76" height="87" :src="item.canvas" />
                        </div>
                    </div>
                </div>
                <div class="yuanquan" :style='"background:" + item.Color100 '>
                    <div class="xiaoyuanquan"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 气候指数县级数据 --> 
    <div v-if="isCounty && $store.state.forq==1" class="name">
        <div v-for="(item, index) in markerArr7" :key="index">
            <div :id="'popup-county' + index" class="cesium-popup" style="pointer-events: none;z-index:1">
                <div class="cesium-popup-content-wrapper" style="box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit">
                    <div class="cesium-popup-content" style="margin:0;">
                        <div class="cesium-popup-content-wrapper" style="box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit">
                            <div class="cesium-popup-content">
                                <div class="qxzs">
                                    <div class="qxzsName" @click="handleClickQCounty(item.name,item.x,item.y)">
                                        <span>{{item.name}}</span>
                                    </div>
                                    <div class="qxzsLXY"
                                            :class="{  'class1': item.RPNI >= 85 && item.RPNI <= 100,
                                                    'class2': item.RPNI >= 50 && item.RPNI < 85,
                                                    'class3': item.RPNI >= 0 && item.RPNI < 50,
                                                    'class4': item.RPNI==null
                                                    }" 
                                    ><span class="iconfont">&#xe6d6;</span>: {{parseInt(item.RPNI)}}</div>
                                    <div class="sxzs">
                                        <div :style='"background:" + item.background'>
                                            <span class="iconfont">&#xe600;</span>{{parseInt(item.BCMI)}}
                                        </div>
                                        <div :style='"background:" + item.background1'>
                                            <span class="iconfont">&#xe62d;</span>{{parseInt(item.HCI)}}
                                        </div> 
                                        <div :style='"background:" + item.background2'>
                                            <span class="iconfont">&#xe67d;</span>{{parseInt(item.WCI)}}
                                        </div>
                                        <div :style='"background:" + item.background3'>
                                            <span class="iconfont">&#xe62e;</span>{{parseInt(item.THI)}}
                                        </div>
                                    </div>
                                </div>   
                                <div class="xiaotri"></div>                                                                         
                                <div class="yuanquanBlue">
                                    <div class="xiaoyuanquan"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 气候指数站点数据 -->
    <div v-if="isStation && $store.state.forq==1" >
        <div v-for="(item, index) in markerArr5" :key="index" >
            <div :id="'popup-station' + index" class="cesium-popup" style="pointer-events: none;z-index:1">
                <div class="cesium-popup-content-wrapper" style="box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit">
                    <div class="cesium-popup-content" style="margin:0;">
                        <div class="cesium-popup-content-wrapper" style="box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit">
                            <div class="cesium-popup-content">
                                <div class="qxzs" style="border:1px soild #ddd">
                                    <div class="qxzsName" style="cursor:pointer;width:100%;text-align:center" @click="handleClickQStation(item.name,item.x,item.y,item.qxll)">
                                        <span style="pointer-events: auto;">{{item.name}}</span>
                                    </div>
                                    <div class="qxzsLXY"
                                            :class="{  'class1': item.RPNI >= 85 && item.RPNI <= 100,
                                                    'class2': item.RPNI >= 50 && item.RPNI < 85,
                                                    'class3': item.RPNI >= 0 && item.RPNI < 50,
                                                    'class4': item.RPNI==null
                                                    }" 
                                    ><span class="iconfont">&#xe6d6;</span>: {{parseInt(item.RPNI)}}</div>
                                    <div class="sxzs">
                                        <div :style='"background:" + item.background'>
                                            <span class="iconfont">&#xe600;</span>{{parseInt(item.BCMI)}}
                                        </div>
                                        <div :style='"background:" + item.background1'>
                                            <span class="iconfont">&#xe62d;</span>{{parseInt(item.HCI)}}
                                        </div> 
                                        <div :style='"background:" + item.background2'>
                                            <span class="iconfont">&#xe67d;</span>{{parseInt(item.WCI)}}
                                        </div>
                                        <div :style='"background:" + item.background3'>
                                            <span class="iconfont">&#xe62e;</span>{{parseInt(item.THI)}}
                                        </div>
                                    </div>
                                </div>
                                <div class="xiaotri"></div>                                                                   
                                <div class="yuanquanBlue" style="margin-top: -10px;">
                                    <div class="xiaoyuanquan"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
  </div>
</template>

<script>
import  CesiumMarker from '../province/components/CesiumMarker'
import axios from 'axios'
  export default {
    name: '',
    components: {
        CesiumMarker
    },
    props:{
        newArr2:Array,
        newArr4:Array,
        newArr5:Array,
        newArr7:Array 
    },
    //watch,不仅仅是在值变化的时候监听，在重新赋值时也在监听
    // computed:{
    //     curState(){
    //         return this.$store.state.curState
    //     }
    // },
    watch:{
        newArr2:{
            handler: function (newVal,oldVal){
                this.changeArr2();
                
            },
            deep: true
        },
        newArr4: {
             handler: function (newVal,oldVal){
                this.changeArr4();
            },
            deep: true
        },
        newArr3: {
             handler: function (newVal,oldVal){
                this.changeArr3();
            },
            deep: true
        },
        newArr5: {
             handler: function (newVal,oldVal){
                this.changeArr5();
            },
            deep: true
        },
        newArr7: {
             handler: function (newVal,oldVal){
                this.changeArr7();
            },
            deep: true
        }
    },
   
    data(){
      return{
        //显示坐标，视角海拔，海拔，视高
        fylzSX:null,
        qhzsSX:null,
        isCounty:true,
        isStation:false,
        x: 0,
        y: 0,
        viewHeight:0,
        seaHeight:0,
        objPopup:{},
        objPopup1:{},
        objPopup2:{},
        objPopup3:{},
        objPopup4:{},
        objPopup7:{},
        pointa: '',
        markerArr1:[],//存储负氧离子城市marker数据
        markerArr2:[],//存储负氧离子城市marker数据
        markerArr3:[],//存储气候指数站点marker数据
        markerArr4:[],//存储负氧离子县站点marker数据
        markerArr5:[],
        markerArr7:[],
        promise:null,
        promise1:null,
        promise2:null,
        fylzProUrl:'/Fylzprovince2.json',
        fylzProUrl1:'/FYLZProvince1.json',
        FPS:null,
        FPSSHOW:false,
        scratch:new Cesium.Cartesian2(),
        model:[],//负氧离子站点数据
        model1:[],//负氧离子县级数据
        showStation:false,
        showQStation:false,
        markerArr2N:[{name:'',canvas:'',count:'',Color100:''}],//点击marker时显示的内容
        markerArr5N:[{name:'',canvas:'',count:'',Color100:'',BCMI:'',HCI:'',THI:'',WCI:''}]
      }
    },
    methods: {
        //气候指数
        addError1(objPopup){
            var that = this;
            this.$nextTick(function() {
               that.$comjs.viewer.scene.preRender.addEventListener(function() {
                for(var i in objPopup){
                    var item = objPopup[i];
                    var htmlOverlay = document.getElementById(i);
                    
                    var position = item.cartesian;
                    var canvasPosition = that.$comjs.viewer.scene.cartesianToCanvasCoordinates(position, that.scratch);
                    if (Cesium.defined(canvasPosition)) {
                        console.log(htmlOverlay.style)
                        htmlOverlay.style.top = canvasPosition.y + 'px';
                        htmlOverlay.style.left = canvasPosition.x + 'px';
                    }else{
                       return false;
                    }
                    
                }
            });
            })
            
        },
        handleClickCounty(name,x,y){
            this.$store.commit("changeForq",0)
            this.$store.commit('changeState',2);
            localStorage.setItem('headerConuty', name);
            localStorage.setItem('countyX', x);
            localStorage.setItem('countyY', y);
            this.$store.commit("changeCountyX",x)
            this.$store.commit("changeCountyY",y)
            this.$store.commit("changeCountyName",name);
            // this.$comjs.onCenterR(x,y-0.6,20000.0);
            //this.$router.push('/county/' + name);
            window.location.href= "http://" + window.location.host + '/county/' + name;
            if(this.$route.path.indexOf('county')>0){
                this.$parent.getCityData()
            }
        },
        handleClickStation(name,x,y){
            this.$store.commit('changeState',3)
            localStorage.setItem('headerStation', name);
            localStorage.setItem('stationX', x);
            localStorage.setItem('stationY', y);
            this.$store.commit("changeStationX",x)
            this.$store.commit("changeStationY",y)
            this.$store.commit("changeStationName",name);
            // this.$comjs.onCenterR(x,y-0.6,20000.0);
            //this.$router.push('/station/' + name);
            window.location.href= "http://" + window.location.host + '/station/' + name;
            if(this.$route.path.indexOf('station')>0){
                this.$parent.getStationData()
            }
        },
        handleClickQCounty(name,x,y){
            localStorage.setItem('headerConuty', name);
            localStorage.setItem('countyX', x);
            localStorage.setItem('countyY', y);
            this.$store.commit("changeCountyX",x)
            this.$store.commit("changeCountyY",y)
            this.$store.commit("changeCountyName",name);
            //this.$comjs.onCenterR(x,y-0.6,20000.0);
            //this.$router.push('/countyW/' + name);
            window.location.href= "http://" + window.location.host + '/countyW/' + name;
            if(this.$route.path.indexOf('countyW')>0){
                this.$parent.getCityData()
            }
        },
        handleClickQStation(name,x,y,qxll){
            localStorage.setItem('headerStation', name);
            localStorage.setItem('qxll', qxll);
            localStorage.setItem('stationX', x);
            localStorage.setItem('stationY', y);
            this.$store.commit("changeStationX",x)
            this.$store.commit("changeStationY",y)
            this.$store.commit("changeStationName",name);
            this.$store.commit("changeqxll",qxll);
            // this.$comjs.onCenterR(x,y-0.6,20000.0);
            //this.$router.push('/stationW/' + name);
            window.location.href= "http://" + window.location.host + '/stationW/' + name;
            if(this.$route.path.indexOf('stationW')>0){
                this.$parent.getStationData()
            }
        },
        //实时显示坐标,注意缩进
        getXy: function(){
          var that = this
          var handler3D = new Cesium.ScreenSpaceEventHandler(that.$comjs.viewer.scene.canvas);//初始化之后才能引入全局viewer,进入函数前初始化this,调用全局viewer
              handler3D.setInputAction(function(movement) {
              var pick= new Cesium.Cartesian2(movement.endPosition.x,movement.endPosition.y);
              if(pick){
                  var cartesian = that.$comjs.viewer.scene.globe.pick(that.$comjs.viewer.camera.getPickRay(pick), that.$comjs.viewer.scene);
                  if(cartesian){
                      //世界坐标转地理坐标（弧度）
                      var cartographic = that.$comjs.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                      if(cartographic){
                          //鼠标位置地球表面物体的真实海拔
                          var height =that.$comjs.viewer.scene.globe.getHeight(cartographic);
                          //视角海拔高度
                          var he = Math.sqrt(that.$comjs.viewer.scene.camera.positionWC.x * that.$comjs.viewer.scene.camera.positionWC.x + that.$comjs.viewer.scene.camera.positionWC.y * that.$comjs.viewer.scene.camera.positionWC.y + that.$comjs.viewer.scene.camera.positionWC.z * that.$comjs.viewer.scene.camera.positionWC.z);
                          var he2 = Math.sqrt(cartesian.x * cartesian.x + cartesian.y * cartesian.y + cartesian.z * cartesian.z);
                          //地理坐标（弧度）转经纬度坐标
                          var point=[ cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
                          if(!height){
                              height = 0;
                          }
                          if(!he){
                              he = 0;
                          }
                          if(!he2){
                              he2 = 0;
                          }
                          if(!point){
                              point = [0,0];
                          }
                          
                          let x = point[0].toFixed(6);  
                          let y = point[1].toFixed(6);
                          let viewHeight = (he - he2).toFixed(2); 
                          let seaHeight = height.toFixed(2) ;
                          that.$store.commit('changeXy', {x, y,viewHeight,seaHeight})//通过vuex传递给其他组件
                          //视角海拔高度:"+(he - he2).toFixed(2)+"米"+"&nbsp;&nbsp;&nbsp;&nbsp;
                          //海拔: " + height.toFixed(2)+"米"+"&nbsp;&nbsp;&nbsp;&nbsp;
                          //经度：" + point[0].toFixed(6) + "&nbsp;&nbsp;
                          //纬度：" + point[1].toFixed(6)+ "</span>";
                      }
                  }
              }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        },
        heightControl: function(){
            var that = this;
            console.log(that.$comjs.viewer.dataSources._dataSources.length)
            // if(this.$store.state.curState==2){
            // that.$comjs.viewer.dataSources.get(0).show=false;
            // that.$comjs.viewer.dataSources.get(1).show=true;
            // // that.$comjs.viewer.dataSources.get(3).show=false;
            // that.$comjs.viewer.dataSources.get(2).show=false;
            // }
            var handler = new Cesium.ScreenSpaceEventHandler(that.$comjs.viewer.scene.canvas);
            handler.setInputAction(function(wheelment) {
                var height=that.$comjs.viewer.camera.positionCartographic.height;
                //滚动时事件穿透，鼠标在元素上时仍可缩放地球
                //console.log(that.$comjs.viewer.camera.heading)
                //console.log(that.$comjs.viewer.camera.pitch)
                //console.log(that.$comjs.viewer.camera.roll)
                that.$comjs.viewer.dataSources.get(0).show=false;
                that.$comjs.viewer.dataSources.get(1).show=false;
                that.$comjs.viewer.dataSources.get(2).show=false;
                    if(height>914219 ){ 
                        //清除已加载的数据集
                        // that.$comjs.viewer.dataSources.remove(that.$comjs.viewer.dataSources.get(0));
                        // 隐藏已加载的数据集
                        that.$comjs.viewer.dataSources.get(0).show=true;
                        that.$comjs.viewer.dataSources.get(1).show=false;
                        that.$comjs.viewer.dataSources.get(2).show=false;
                        // that.$comjs.viewer.dataSources.get(3).show=false;
                        // that.$comjs.viewer.dataSources.get(4).show=false;
                        
                    }else if(height<914219 && height>313015){
                        that.$comjs.viewer.dataSources.get(0).show=false;
                        that.$comjs.viewer.dataSources.get(1).show=true;
                        // that.$comjs.viewer.dataSources.get(3).show=false;
                        that.$comjs.viewer.dataSources.get(2).show=false;
                        // that.$comjs.viewer.dataSources.get(4).show=true;
                    }else{
                        that.$comjs.viewer.dataSources.get(0).show=false;
                        that.$comjs.viewer.dataSources.get(1).show=false;
                        that.$comjs.viewer.dataSources.get(2).show=true;
                        // that.$comjs.viewer.dataSources.get(3).show=false;
                        // that.$comjs.viewer.dataSources.get(4).show=true;
                    }
                    if(height<123000){//显示站点
                        //改变当前页面要显示的站点内容，
                        // 1：表示显示负氧离子 城市点数据，
                        // 2：表示显示负氧离子 县级点数据，
                        // 3：表示显示负氧离子 站点级数据，
                        that.isCounty =false;
                        that.isStation=true;
                        //当前边界显示状态
                        that.$store.commit('changeFYLZCS',1) 
                    }
                    if(height<313015 && height>123000){//显示县级站点
                        that.$store.commit('changeState',2)
                        that.isCounty =true;
                        that.isStation=false;
                    }
                    if(height>313015 ){//显示城市
                        that.$store.commit('changeState',1)
                        that.$store.commit('changeFYLZCS',0)
                    }
                    if(height>2130450){
                        that.isCounty =false;
                        that.isStation=false;
                    }
            }, Cesium.ScreenSpaceEventType.WHEEL);
        },
        colorRgba(a){
            let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
            var sColor = a.toLowerCase();
                if(sColor && reg.test(sColor)){
                    if(sColor.length === 4){
                        var sColorNew = "#";
                        for(var i=1; i<4; i+=1){
                            sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));	
                        }
                        sColor = sColorNew;
                    }
                    //处理六位的颜色值
                    var sColorChange = [];
                    for(var i=1; i<7; i+=2){
                        sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));	
                    }
                    return "rgba(" + sColorChange.join(",") + ",100%)";
                }else{
                    return sColor;	
                }
        },
        //负氧离子县级数据 model1
        changeArr4(){
            var markerArr4 = [];
            console.log(this.newArr4.length)
            for(var i=0;i<this.newArr4.length;i++){
                markerArr4[i]={};
                markerArr4[i].x=this.newArr4[i].Lon;
                markerArr4[i].y=this.newArr4[i].Lat;
                markerArr4[i].markerImg='./mark.png';
                markerArr4[i].name=this.newArr4[i].Country;
                markerArr4[i].name1=this.newArr4[i].City;
                markerArr4[i].level=this.newArr4[i].level;
                markerArr4[i].count=this.newArr4[i].negative_K04;
                markerArr4[i].markerId = i;
                switch(this.newArr4[i].Level){
                    case 1:{
                        markerArr4[i].num = 3;
                        markerArr4[i].Level='I';
                        markerArr4[i].markerColor=this.$comjs.color1;
                        markerArr4[i].canvas = '/siji.gif';
                        markerArr4[i].markerImg = "/yq1.png";
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr4[i].Color100=this.colorRgba(markerArr4[i].markerColor);
                        break;
                    }
                    case 2:{
                        markerArr4[i].num = 5;
                        markerArr4[i].Level='II';
                        markerArr4[i].markerColor=this.$comjs.color2;
                        markerArr4[i].canvas = '/sanji.gif';
                         markerArr4[i].markerImg = "/yq2.png"
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr4[i].Color100=this.colorRgba(markerArr4[i].markerColor);
                        break;
                    }
                    case 3:{
                        markerArr4[i].num = 7;
                        markerArr4[i].Level='III';
                        markerArr4[i].markerColor=this.$comjs.color3;
                        markerArr4[i].canvas = '/erji.gif';
                        markerArr4[i].markerImg = "/yq3.png"
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr4[i].Color100=this.colorRgba(markerArr4[i].markerColor);
                        break;
                    }
                    case 4:{
                        markerArr4[i].num = 9;
                        markerArr4[i].Level='IV';
                        markerArr4[i].markerColor=this.$comjs.color4;
                        markerArr4[i].canvas = '/yiji.gif';
                        markerArr4[i].markerImg = "/yq4.png";
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr4[i].Color100=this.colorRgba(markerArr4[i].markerColor);
                        break;
                    }
                    case 5:{
                        markerArr4[i].num = 11;
                        markerArr4[i].Level='VI';
                        markerArr4[i].markerColor=this.$comjs.color5;
                        markerArr4[i].canvas = '/1.gif';
                        markerArr4[i].markerImg = "/yq5.png";
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr4[i].Color100=this.colorRgba(markerArr4[i].markerColor);
                        break;
                    }
                }
                var position =Cesium.Cartesian3.fromDegrees(markerArr4[i].x,markerArr4[i].y, 0);
                var cartesian;
                    cartesian = position;
                var idName = markerArr4[i].markerId;
                var Level = markerArr4[i].Level;
                var eleId = 'popup-fylzCounty' + "-" + Level + "-" + i ;
                this.objPopup3[eleId] = {
                    cartesian: cartesian
                };
            }
            this.markerArr4 = markerArr4;
        },
        //负氧离子站点数据 model
        changeArr2(){
            var markerArr2 = [];
            // this.newArr2 = this.$store.state.markerArr2;
            console.log(this.newArr2.length)
            for(var i=0;i<this.newArr2.length;i++){
                markerArr2[i]={};
                markerArr2[i].x=this.newArr2[i].Lon;
                markerArr2[i].y=this.newArr2[i].Lat;
                markerArr2[i].markerImg='./yq1.png';
                markerArr2[i].name=this.newArr2[i].StationName;
                markerArr2[i].name1=this.newArr2[i].City;
                markerArr2[i].level=this.newArr2[i].level;
                markerArr2[i].negative_K04=parseInt(this.newArr2[i].negative_K04);
                markerArr2[i].MaxNegative_K04=this.newArr2[i].MaxNegative_K04;
                markerArr2[i].markerId = i;
                markerArr2[i].QXDJ=this.newArr2[i].QXDJ;
                switch(this.newArr2[i].Level){
                    case 1:{
                        markerArr2[i].num = 3;
                        markerArr2[i].Level='I';
                        markerArr2[i].markerColor=this.$comjs.color1;
                        markerArr2[i].canvas = '/siji.gif';
                        markerArr2[i].markerImg='./yq1.png';
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr2[i].Color100=this.colorRgba(markerArr2[i].markerColor);
                        break;
                    }
                    case 2:{
                        markerArr2[i].num = 5;
                        markerArr2[i].Level='II';
                        markerArr2[i].markerColor=this.$comjs.color2;
                        markerArr2[i].canvas = '/sanji.gif';
                        markerArr2[i].markerImg='./yq2.png';
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr2[i].Color100=this.colorRgba(markerArr2[i].markerColor);
                        break;
                    }
                    case 3:{
                        markerArr2[i].num = 7;
                        markerArr2[i].Level='III';
                        markerArr2[i].markerColor=this.$comjs.color3;
                        markerArr2[i].canvas = '/erji.gif';
                        markerArr2[i].markerImg='./yq3.png';
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr2[i].Color100=this.colorRgba(markerArr2[i].markerColor);
                        break;
                    }
                    case 4:{
                        markerArr2[i].num = 9;
                        markerArr2[i].Level='IV';
                        markerArr2[i].markerColor=this.$comjs.color4;
                        markerArr2[i].canvas = '/yiji.gif';
                        markerArr2[i].markerImg='./yq4.png';
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr2[i].Color100=this.colorRgba(markerArr2[i].markerColor);
                        break;
                    }
                    case 5:{
                        markerArr2[i].num = 11;
                        markerArr2[i].Level='VI';
                        markerArr2[i].markerColor=this.$comjs.color5;
                        markerArr2[i].canvas = '/1.gif';
                        markerArr2[i].markerImg='./yq5.png';
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr2[i].Color100=this.colorRgba(markerArr2[i].markerColor);
                        break;
                    }
                }
                //加entity
                // this.model[i] = this.$comjs.viewer.entities.add({
                //     name : markerArr2[i].name,
                //     position : Cesium.Cartesian3.fromDegrees(markerArr2[i].x,markerArr2[i].y,0),
                //     billboard : {
                //         image : markerArr2[i].markerImg,
                //         verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                //         clampToGround: true,
                //         scale:0.1
                //     },
                //     label : {
                //         text : markerArr2[i].name ,
                //         font : '10px sans-serif',
                //         // showBackground : true,
                //         horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                //         pixelOffset : new Cesium.Cartesian2(0.0, 5),
                //         pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5)
                //     }
                // });
                //加div
                // if(markerArr2[i].Level=='I'||markerArr2[i].Level=='II'){
                var position = Cesium.Cartesian3.fromDegrees(markerArr2[i].x,markerArr2[i].y, 0);
                var cartesian;
                cartesian = position;
                var idName = markerArr2[i].markerId;
                var Level = markerArr2[i].Level;
                var eleId = 'popup-fylzStation' + "-" + Level + "-" + i;
                this.objPopup1[eleId] = {
                    cartesian: cartesian
                };
                // }
            } 
            
            this.markerArr2 = markerArr2;
        },
        // 动态改变颜色
        fourColor(myArr,yourArr){ 
            switch( myArr.BCMIDJ ){
                    case '舒适':{
                        yourArr.background = "#32F3A9";
                        break;
                    }
                    case '一般舒适':{
                        yourArr.background = "#63B5E6";
                        break;
                    }
                    case '不舒适':{
                        yourArr.background = "#E8CE67";
                        break;
                    }
                    default:{
                        yourArr.background = 'transparent';
                    }
                }
                switch( myArr.HCIDJ ){
                    case '特别适宜':{
                        yourArr.background1 = "#32F3A9";
                        break;
                    }
                    case '适宜':{
                        yourArr.background1 = "#63B5E6";
                        break;
                    }
                    case '不适宜':{
                        yourArr.background1 = "#E8CE67";
                        break;
                    }
                    default:{
                        yourArr.background1 = 'transparent';
                    }
                }
                switch( myArr.WCIDJ){
                    case '无胁迫':{
                        yourArr.background2 = "#32F3A9";
                        break;
                    }
                    case '弱冷胁迫':{
                        yourArr.background2 = "#32F3A9";
                        break;
                    }
                    case '中冷胁迫':{
                        yourArr.background2 = "#63B5E6";
                        break;
                    }
                    case '强冷胁迫':{
                        yourArr.background2 = "#E8CE67";
                        break;
                    }
                    default:{
                        yourArr.background2 = 'transparent';
                    }
                }
                switch( myArr.THIDJ ){
                    case '无胁迫':{
                        yourArr.background3 = "#32F3A9";
                        break;
                    }
                    case '弱温湿胁迫':{
                        yourArr.background3 = "#32F3A9";
                        break;
                    }
                    case '中温湿胁迫':{
                        yourArr.background3 = "#63B5E6";
                        break;
                    }
                    case '强温湿胁迫':{
                        yourArr.background3 = "#E8CE67";
                        break;
                    }
                    default:{
                        yourArr.background3 = 'transparent';
                    }
                }
        },
        //气象指数县数据 model1
        changeArr7(){
            var markerArr7 = [];
            for(var i=0;i<this.newArr7.length;i++){
                markerArr7[i]={};
                markerArr7[i].x=this.newArr7[i].Lon;
                markerArr7[i].y=this.newArr7[i].Lat;
                markerArr7[i].markerImg='./mark.png';
                markerArr7[i].name=this.newArr7[i].Country;
                markerArr7[i].name1=this.newArr7[i].City;
                markerArr7[i].BCMI = parseInt(this.newArr7[i].BCMI);
                markerArr7[i].HCI = parseInt(this.newArr7[i].HCI);
                markerArr7[i].THI = parseInt(this.newArr7[i].THI);
                markerArr7[i].WCI = parseInt(this.newArr7[i].WCI);
                markerArr7[i].markerId = i;
                markerArr7[i].RPNI = this.newArr7[i].RPNI;
                this.fourColor(this.newArr7[i],markerArr7[i]);
                var position =Cesium.Cartesian3.fromDegrees(markerArr7[i].x,markerArr7[i].y, 0);
                var cartesian = position;
                var idName = markerArr7[i].markerId;
                var Level = markerArr7[i].Level;
                var eleId =  'popup-county' + i;
                this.objPopup7[eleId] = {
                    cartesian: cartesian
                };
            }
            this.markerArr7 = markerArr7;
        },
        //气象指数站点数据model
        changeArr5(){
            var markerArr5 = [];
            for(var i=0;i<this.newArr5.length;i++){
                markerArr5[i]={};
                markerArr5[i].x=this.newArr5[i].Lon;
                markerArr5[i].y=this.newArr5[i].Lat;
                markerArr5[i].markerImg='./mark.png';
                markerArr5[i].name=this.newArr5[i].StationName;
                markerArr5[i].name1=this.newArr5[i].City;
                markerArr5[i].level=this.newArr5[i].level;
                markerArr5[i].BCMI = parseInt(this.newArr5[i].BCMI);
                markerArr5[i].HCI = parseInt(this.newArr5[i].HCI);
                markerArr5[i].THI = parseInt(this.newArr5[i].THI);
                markerArr5[i].WCI = parseInt(this.newArr5[i].WCI);
                markerArr5[i].qxll = this.newArr5[i].IIiii;
                markerArr5[i].RPNI = this.newArr5[i].RPNI;
                this.fourColor(this.newArr5[i],markerArr5[i]);
                var position =Cesium.Cartesian3.fromDegrees(markerArr5[i].x,markerArr5[i].y, 0);
                var cartesian = position;
                var idName = markerArr5[i].markerId;
                var Level = markerArr5[i].Level;
                var eleId =  'popup-station' + i;
                this.objPopup4[eleId] = {
                    cartesian: cartesian
                };
            }  
            this.markerArr5 = markerArr5;
        },
        
    },    
    beforeDestroy(){
        if(this.fylzSX){
            clearInterval(this.fylzSX)
        }
        if(this.qhzsSX){
            clearInterval(this.qhzsSX)
        }
    },
    mounted(){
        this.$comjs.cesiumInit();//初始化
        this.getXy();//获取经纬度
        this.heightControl();//鼠标滚轮获取视高，动态控制
        //请求marker数据
        if(this.fylzSX){
            clearInterval(this.fylzSX)
        }
        if(this.qhzsSX){
            clearInterval(this.qhzsSX)
        }
        
        // setTimeout(()=>{
        //     //固定时间刷新
        //     var nowDate = new Date();
        //     var nowHour = nowDate.getHours();
        //     if(nowHour==3){
        //         //执行刷新页面
        //         //location.reload()
        //     }
        //     console.log(nowHour);
        //     this.fylzProUrl = "/FYLZProvince1.json"
        //     // this.getProvinceData();
        // },5000)
        // setTimeout(()=>{
        //     //调用外部方法，绑定html到球面上,此方法绑定球上的坐标，获取不到，鼠标远离球面都会使球面数据出现错误，从而报错，出现不能获取x,y的错误

        //     // this.$comjs.addError(this.objPopup);
        //     // this.$comjs.addError1(this.objPopup1);
        //     // this.$comjs.addError2(this.objPopup2);
        //     // this.$comjs.addError3(this.objPopup3);
            
        //     for(var i=0;i<this.model1.length;i++){
        //         this.model1[i].show = false
        //     }
        // },1000)
        setTimeout(()=>{
            this.$nextTick(function(){
                this.$stroe.state.curState=2
            })
            this.$comjs.viewer.dataSources.get(0).show=false;
            this.$comjs.viewer.dataSources.get(1).show=true;
            this.$comjs.viewer.dataSources.get(2).show=false;
           
        },1500)
        setTimeout(()=>{
            if(this.$store.state.forq==0){
                this.$comjs.addError1(this.objPopup1);
                this.$comjs.addError1(this.objPopup3);
            }else if(this.$store.state.forq==1){
                this.$comjs.addError1(this.objPopup4);
                this.$comjs.addError1(this.objPopup7);
            }
        },500)
    }
    
  }
</script>


<style  >
    #cesiumContainer{
        width:100vw;
        height:100vh;
        overflow: hidden;
    }
    .cesium-viewer-bottom{
        display:none;
    }
    .FPS{
        width:80px;
        height:50px;
        position:absolute;
        top:9px;
        right:0px;
        z-index:3;
        color:#EE5522;
        font-size: 20px;
        text-align: center;
    }
</style>
